<template>
     <div class="pageModal">
          <el-dialog
               :draggable="true"
               :title="modalConfig.title"
               v-model="dialogVisible"
               :close-on-click-modal="false"
               width="50%"
               destroy-on-close
               class="modal-dialog-class"
               @close="dialogColse"
          >
               <el-scrollbar height="450px">
                    <baseForm
                         v-bind="modalConfig"
                         v-model="formData"
                         ref="baseFormRef"
                         @modalChange="modalChange"
                         :nestingiframetype="nestingiframetype"
                    >
                         <template
                              v-for="item in otherPropSlots"
                              :key="item.field"
                              #[item.slotName]="scope"
                         >
                              <template v-if="item.slotName">
                                   <slot
                                        :name="item.slotName"
                                        :row="scope.row"
                                        :data="scope.data"
                                   ></slot>
                              </template>
                         </template>
                    </baseForm>
                    <slot></slot>
               </el-scrollbar>
               <template #footer>
                    <span class="dialog-footer">
                         <div
                              class="btnClass info"
                              @click="dialogVisible = false"
                         >
                              <i class="iconfont icon-shanchu1"></i>
                              取 消
                         </div>
                         <div
                              class="btnClass primary"
                              @click="handleConfirmClick"
                         >
                              <i class="iconfont icon-wancheng"></i>
                              确定
                         </div>
                    </span>
               </template>
          </el-dialog>
     </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import emitter from '@/utils/mitt'
import baseForm from '@/baseUi/baseForm/index'
const baseFormRef = ref<any>()
const props = defineProps({
     modalConfig: {
          type: Object,
          required: true,
     },
     defaultInfo: {
          type: Object,
          default: () => ({}),
     },
     otherInfo: {
          type: Object,
          default: () => ({}),
     },
     pageName: {
          type: String,
          required: true,
     },
     nestingiframe: {
          type: String,
          required: false,
     },
})
const nestingiframetype = ref(props.nestingiframe)

const emit = defineEmits([
     'addSuccess',
     'update:modelValue',
     'modalChange',
     'editSuccess',
])

const dialogVisible = ref(false)
// 1.绑定属性
const originFormData: any = {}
const formData = ref<any>({})
formData.value = { ...originFormData }
// pageListData.value.deviceid = 接口
watch(
     () => props.defaultInfo,
     (newValue) => {
          if (props.modalConfig?.formItems) {
               props.modalConfig.formItems.forEach((item: any) => {
                    formData.value[item.field] =
                         newValue[item.field] !== undefined
                              ? newValue[item.field]
                              : item.initValue
               })
          }
     },
     {
          deep: true,
          immediate: true,
     },
)

const modalChange = (item: any) => {
     emit('modalChange', item)
}
// 剩余需要的插槽
const otherPropSlots = computed(() => {
     return props.modalConfig.formItems.filter(() => {
          return true
     })
})

const handleConfirmClick = () => {
     if (!baseFormRef.value?.formRef) return
     baseFormRef.value?.formRef.validate((valid: any): any => {
          if (valid) {
               console.log(props.defaultInfo, formData.value)
               dialogVisible.value = false
               //编辑
               if (
                    Object.keys(props.defaultInfo).length &&
                    props.defaultInfo.modalType === 'edit'
               ) {
                    // 删除key modeType
                    delete props.defaultInfo.modalType
                    console.log('修改', props.defaultInfo, formData.value)
                    emit('editSuccess', {
                         ...props.defaultInfo,
                         ...formData.value,
                    })
               } else {
                    //新增
                    delete props.defaultInfo.modalType
                    emit('addSuccess', {
                         ...props.defaultInfo,
                         ...formData.value,
                    })
               }
          } else {
               return false
          }
     })
}

onMounted(() => {
     emitter.emit('modalConfig', props.modalConfig)
})
const dialogColse = () => {
     // console.log('dilogClose', baseFormRef.value?.formRef)
     console.log('我执行了', baseFormRef.value)
     baseFormRef.value.formRef && baseFormRef.value.formRef?.resetFields()
}
// 暴露给父组件
defineExpose({
     dialogVisible,
     dialogColse,
})
</script>

<style lang="scss" scoped>
.btns-reset {
     width: 60px;
     height: 30px;
     line-height: 30px;
     color: #fff;
     border-radius: 5px;
     font-size: 12px;
     display: inline-block;
     margin-right: 15px;
     text-align: center;
     cursor: pointer;
     border: 1px solid #409eff;
     color: #409eff;
     font-size: 12px;
     vertical-align: middle;
}

.btns-query {
     width: 60px;
     height: 30px;
     line-height: 30px;
     color: #fff;
     border-radius: 5px;
     font-size: 12px;
     display: inline-block;
     text-align: center;
     cursor: pointer;
}

.dialog-footer {
     display: flex;
     justify-content: flex-end;
     gap: 5px;
}
</style>
